<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--replaceAll replaceWith-->
    <style>

        .right div {
            background: yellow;
        }
    </style>
</head>
<body>
<h2>replaceWith()和replaceAll()</h2>
<div class="left">
    <button class="bt1">点击,通过replaceWith替换内容</button>
    <button class="bt2">点击,通过rreplaceAll替换内容</button>
</div>
<div class="right">
    <div>
        <p>第一段</p>
        <p>第二段</p>
        <p>第三段</p>
    </div>
    <div>
        <p id="po">第四段</p>
        <p>第五段</p>
        <p>第六段</p>
    </div>
</div>

<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
<script>
    $(".bt1").on('click', function() {
        //找到内容为第二段的p元素
        //通过replaceWith删除并替换这个节点
    $(".right>div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
    })

    $(".bt2").on('click', function() {
        //找到内容为第六段的p元素
        //通过replaceAll删除并替换这个节点
        //前面是个对象  记得，， （要不然能加$() 吗？嘻嘻）
        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll($(".right>div:last p:last"))
    })

    $("#po").parent().text("parent")

</script>
</body>
</html>